<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>登录界面</title>
    <link rel="shortcut icon" href="/img/logo.png">
    <link type="text/css" rel="stylesheet" th:href="@{css/login/css/normalize.css}"   />
    <link type="text/css" rel="stylesheet" th:href="@{css/login/css/demo.css}"  />
    <!--必要样式-->
    <link type="text/css" rel="stylesheet" th:href="@{css/login/css/component.css}" />
    <style>
        .smsBtn{
            float:right;
            height:46px;
            font-size:14px;
            line-height:46px;
            text-align: center;
            color:#fff;
            width:90px;
        }
    </style>
</head>
<body>
<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <div class="logo_box">
                <h3>后台管理系统</h3>
                <form action="#" name="f" method="post">
                    <div class="input_outer">
                        <span class="u_user"></span>
                        <input name="username" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户">
                    </div>
                    <div class="input_outer">
                        <span class="us_uer"></span>
                        <input name="password" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value=""
                               type="password" placeholder="请输入密码">
                    </div>
                    <div class="input_outer"  th:style="'display:' + (${captchaEnabled} ? '' : 'none')">
                        <span class="us_uer"></span>
                        <input name="authCode" class="text" style="color: #FFFFFF !important; width:170px!important;position:absolute; z-index:100;"value="" type="authCode" placeholder="请输入短信验证码">
                        <div class="smsBtn active">获取验证码</div>
                    </div>
                    <div class="mb2"><a class="act-but submit"  onclick="login()" style="color: #FFFFFF">登录</a></div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{js/login/js/TweenLite.min.js}" ></script>
<script type="text/javascript" th:src="@{js/login/js/EasePack.min.js}" ></script>
<script type="text/javascript" th:src="@{js/login/js/rAF.js}" ></script>
<script type="text/javascript" th:src="@{js/login/js/demo-1.js}" ></script>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var captchaEnabled = [[${captchaEnabled}]];
    document.onkeydown=keyDownSearch;
    //回车登陆
    function keyDownSearch(e) {
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            login();//具体处理函数
            return false;
        }
        return true;
    }

    function login() {
        var username = $.common.trim($("input[name='username']").val());
        if(username==null || username==''){
            $.modal.msg("登陆账户不能为空");
            return;
        }
        var password = $.common.trim($("input[name='password']").val());
        if(password==null || password==''){
            $.modal.msg("密码不能为空");
            return;
        }
        var rememberMe = "false";

        var authCode = $.common.trim($("input[name='authCode']").val());
        if(captchaEnabled){
            if( authCode==null || authCode==''){
                $.modal.msg("验证码不能为空");
                return;
            }
        }
        $.ajax({
            type: "post",
            url: ctx + "login",
            data: {
                "username": username,
                "password": password,
                "authCode": authCode,
                "rememberMe": rememberMe
            },
            success: function(r) {
                if (r.code == 0) {
                    location.href = ctx + 'index';
                } else {
                    $.modal.closeLoading();
                    $('.imgcode').click();
                    $.modal.msg(r.msg);
                }
            }
        });
    }
    var codeTime = 60 //验证码发送时间
    // 点击验证码
    $(".smsBtn").click(function(){
        if(codeTime == 60){
            $(".smsBtn").removeClass("active");
            $.ajax({
                url: ctx+'common/getMsgCode',
                dataType: 'JSON',
                type: 'POST',
                success: function(data) {
                    $(".SMS_btn").addClass("active");
                    if(data.code == 0) {
                        $.modal.closeLoading();
                        $('.imgcode').click();
                        $.modal.msg("验证码发送成功，请注意查收");
                        var timeOut = setInterval(function() {
                            if(codeTime < 2) {
                                codeTime = 60
                                $(".smsBtn").html('获取验证码')
                                clearInterval(timeOut)
                            } else {
                                codeTime--
                                $(".smsBtn").html(codeTime + "s后重试")
                            }
                        }, 1000)
                    } else {
                        $.modal.closeLoading();
                        $.modal.msg(data.msg);
                    }
                }
            });
        }
    });

    /**
     * 获取指定的URL参数值
     * URL:http://www.quwan.com/index?name=tyler
     * 参数：paramName URL参数
     * 调用方法:getParam("name")
     * 返回值:tyler
     */
    function getParam(paramName) {
        paramValue = "", isFound = !1;
        if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
            arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
            while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
        }
        return paramValue == "" && (paramValue = null), paramValue
    }
</script>
</body>
</html>